<template>
	<view class="app">
		<view class="page-grad"></view>
		
		<view class="user-info"  >
			<button plain class="user-avatar-button"  open-type="chooseAvatar" @chooseavatar="(e) => {onChooseAvatar(e)}">
				<image class="user-avatar" :src="vuex_user.userAvatar || emptyAvatar" @error="avatarError"></u-image>
			</button>  
			<view class="user-info-middle">
				<view  class="user-name">
					<text style="overflow: hidden;text-overflow: clip;color: #FFFFFF;">{{ indexData.siteMasterName || vuex_user.userNickname || '　' }}</text>
				</view>
				<text class="user-id">ID:{{ vuex_user.userId || '0' }}</text>
			</view> 
			<view class="site-choose-box">
				<view class="site-choose-button" @click="showSiteSelect=true">
					<text style="margin-right: 20rpx;font-size: 24rpx;">站点：{{siteName}}</text>
					<u-icon name="play-right-fill" color="#ffffff" size="20" style="transform: rotate(90deg);"></u-icon>
					<u-select @confirm="changeSite" v-model="showSiteSelect" :list="siteList" value-name="siteId" label-name="siteName" :default-value="[default_value]"></u-select>
				</view>
			</view>
		</view>
		
		<view class="user-money-bar box-card site-money-box" style="height: 200rpx;" @click="gotoPage('/pageA/sitemaster/recharge?adminMoney='+indexData.adminMoney)">
			<view class="site-money-item">
				<text style="display:block;font-size:25rpx;padding-left:20rpx;padding-bottom:12rpx;color: #8B8B8B;">账户余额(元)</text>
				<text style="color:#36BE6A;font-size:45rpx;">￥</text>
				<text style="font-size:60rpx;color:#36BE6A;font-weight:bold;">{{indexData.adminMoney}}</text>
			</view>
			<view class="site-money-item" style="text-align:right;padding-right:40rpx;">
				<text style="padding:5px 15px;padding:10rpx 30rpx;font-size:30rpx;background: linear-gradient(90deg,#3CC291,#38CF61);color:#fff;border-radius:30rpx;">充值</text>
			</view>
		</view>
		
		<view class="order-card box-card">
			<view style="width:100%;padding-bottom:20rpx;border-bottom:0.5px solid #EEEEEE;border-bottom:1rpx solid #EEEEEE;">
				<text style="color: #36BE6A;">▎</text>
				<text style="font-weight:bold;color: #000000;">数据概览</text>
			</view>
			<view style="display: flex;flex-wrap: wrap;">
				<view class="site-date-item">
					<text class="site-date-item-title">今日完成订单</text>
					<text class="site-date-item-data">{{indexData.orderNum}}</text>
				</view>
				<view class="site-date-item">
					<text class="site-date-item-title">今日完成订单金额</text>
					<text class="site-date-item-data">￥{{indexData.orderSum}}</text>
				</view>
				<view class="site-date-item">
					<text class="site-date-item-title">今日提现通过笔数</text>
					<text class="site-date-item-data">{{indexData.userWithdrawNum}}</text>
				</view>
				<view class="site-date-item">
					<text class="site-date-item-title">今日提现通过金额</text>
					<text class="site-date-item-data">￥{{indexData.userWithdrawSum}}</text>
				</view>
			</view>
		</view> 
		 <view class="action-card box-card"  >
			<view style="width:100%;padding-bottom:20rpx;border-bottom:0.5px solid #EEEEEE;border-bottom:1rpx solid #EEEEEE;">
				<text style="color: #36BE6A;">▎</text>
				<text style="font-weight:bold;color: #000000;">我的功能</text>
			</view>
			<view style="display: flex;flex-wrap: wrap;width: 100%;">
				<view class="action-card-item" @click="Gotolist" v-if="false">
					<img class="icon-img" src="@/static/images/waste_icon.png" alt="">
					<text class="action-card-text">废品管理</text> 
				</view>   
				<view class="action-card-item" @click="gotoPage('/pageA/sitemaster/recyclerlist?siteId='+siteId)">
					<img class="icon-img" src="@/static/images/recycler_icon.png" alt="">
					<text class="action-card-text">回收员</text> 
				</view>   
			</view>
		 </view>
	 	<c-custom-tabbar />
	</view>
</template>
<style scoped>
	.user-info{ padding: 20rpx 30rpx;display: flex;align-items: center;color:white;}
	.user-avatar{ width:100%;height: 100%; }
	.user-info-middle{ display: flex; ; flex-direction: column;overflow: hidden;width: 200rpx;}
	.user-name{ font-size: 34rpx;margin-bottom: 16rpx; display: flex;align-items: center; } 
	/deep/ .user-name .u-icon{margin-left: 20rpx;  }
	.user-avatar-button{margin: 0;width: 100rpx;height: 100rpx;padding:0;border-radius: 140rpx;margin-right: 30rpx;border:none;flex-shrink: 0;}
	.user-name-edit{ background-color: white;color:#666;padding:6rpx 10rpx}
	
	.user-money-bar{  display: flex;align-items: center;}
	.user-money-item{ flex:1; display: flex;flex-direction: column;align-items: center;border-right:1px solid #ccc;}
	.user-money-item:last-child{border: none;}
	.user-money-top{font-size: 50rpx;color:#666;}
	
	.order-card{ display: block;  }
	.order-card-item{flex:1;display: flex;flex-direction: column;align-items: center;}
	.order-card-icon{ font-size: 70rpx;margin-bottom: 8rpx;position: relative;}
	
	.action-card{ display: flex;flex-wrap: wrap;padding-bottom: 10rpx;}
	.action-card-item{ margin: 20rpx 0;width: 25%;display: flex;flex-direction: column;align-items: center;}
	.action-card-icon{ font-size: 70rpx;margin-bottom: 8rpx;} 
	
	.user-id{font-size: 24rpx;color: #EDEDED;}
	.site-choose-box{width:300rpx;height:100rpx;display:flex;justify-content:right;}
	.site-choose-button{background-color: #2faa5e;margin:auto;margin-right: 0;border-radius:50rpx;padding:5px 10px;padding:10rpx 20rpx;position:absolute;right:28rpx;}
	.page-grad {z-index: -1;background: #36BE6A;height: 240rpx;position: absolute;top: 0;left: -3%;width: 106%;border-radius: 0 0 40rpx 40rpx;}
	.site-money-box{background: url('@/static/images/site-money-box-bg.png') no-repeat center center;background-size: 100% 100%;}
	.site-money-item{width: 50%;}
	.site-date-item{width: 50%;text-align: center;padding: 20rpx;}
	.site-date-item-title{display:block;font-size:25rpx;padding:20rpx;}
	.site-date-item-data{color:black;font-size:40rpx;font-weight: bold;}
	.icon-img{width:60rpx;height:60rpx;}
	.action-card-text{font-size:26rpx;padding:14rpx;}
</style>
<script> 
	export default {
		data() {
			return {
				needAuthorization:true,
				emptyAvatar: '../../static/images/avatar.jpg',
				showSiteSelect:false,
				siteList:[],
				siteId:0,
				nowSite:{},
				indexData:{
					adminMoney:0,
					orderNum:0,
					orderSum:0,
					userWithdrawNum:0,
					userWithdrawSum:0
				},
				default_value:0
			}
		},
		computed:{
			siteName(){
				return this.nowSite?.label || '暂无站点'
			}
		},
		methods:{
			Gotolist(){
				uni.navigateTo({
					url:'./wastelist'
				})
			},
			showToast(txt){
				this.$u.toast(txt)
			},
			getUserInfo(){
				this.$u.api.user.getUserInfo().then(res => {
					if(res?.status != 200 || res?.data == undefined){ 
						return false
					}
					this.$u.vuex('vuex_user',res?.data)   
				})
			},
			avatarError(){
				this.$u.vuex('vuex_user.userAvatar',this.emptyAvatar)  
			},
			gotoPage(path){
				uni.navigateTo({ url: path });
			},
			changeSite(e){
				let nowSiteId = e[0].value
				this.siteId = nowSiteId
				this.getIndexData()
			},
			getIndexData(){
				let data = {siteId:this.siteId}
				this.$u.api.site.getIndexData(data).then(res =>{
					if(res.status != 200){
						return false
					}
					this.indexData = {...res.data}
				})
			},
			getSiteList(){
				this.$u.api.site.getSiteList({isAdmin:1}).then(res => {  
					if(res.status != 200){
						return false
					}
					if(res.data.length == 0)
					{
						this.$u.toast('请先设置站点')
						return false
						/* setTimeout(function(){
							uni.navigateBack();
						},1000) */
					}
					this.siteList = []
					for(let index in res.data)
					{
						this.siteList.push({
							siteId:res.data[index].siteId,
							siteName:res.data[index].siteName
						})
						if(res.data[index].siteDefault == 1 || index == 0)
						{
							this.default_value = index
							this.siteId = res.data[index].siteId
							this.nowSite = {
								value:res.data[index].siteId,
								label:res.data[index].siteName,
							}
						}
					}
				})
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getSiteList()
			this.getIndexData()
		}
	}
</script>